<template>
    <div class="Retrieval">
        <div style="margin-top: 10px">
            <van-search v-model="searchData.taskName" style="border-radius: 10px; height: 44px" background="#f7f8fa"
                placeholder="请输入搜索关键词" @search="getchaXun" />
        </div>
        <div class="Retrieval-middle1" v-show="tableData.length > 0" ref="RetrievalMiddle1">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="init">
                <van-cell v-for="(item, index) in tableData" :key="index" style="border-radius: 10px;margin-top: 14px;">
                    <ul class="Retrieval-middle">
                        <li class="Retrieval-middle2">
                            <div @click.stop="stopPropagation($event)"> <van-checkbox v-model="item.checked"
                                    icon-size="15px" shape="square" @change="changeVal">{{ item.taskName }}</van-checkbox>
                            </div>
                            <template v-if="type == '风险签收' || type == '风险关联'">
                                <span :style="item.signStatus == 0 ? 'color: #0272D4;cursor: pointer;' : ''"
                                    @click.stop="item.signStatus == 0 ? Signfor(item) : ''"> {{ item.signStatus |
                                        inUseName(Enum.QSZT) }} </span>
                            </template>
                            <template v-else>
                                <span style="float: right;">{{ item.riskRemove | inUseName(Enum.DQZT) }} </span>
                            </template>
                        </li>
                        <li class="Retrieval-middle3">
                            风险发布时间：{{ item.createDate }}
                            <span style="float: right;">{{ item.riskLevel | inUseName(Enum.FXDJ) }} </span>
                        </li>
                        <li class="Retrieval-middle4">
                            风险上报截止时间：{{ item.deadline }}
                        </li>
                    </ul>
                </van-cell>
            </van-list>

        </div>
        <div v-show="tableData.length == 0" style="height: 84vh; text-align: center; padding-top: 20vh">
            <div style="margin-bottom: 10px">
                <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />
            </div>
            <div>暂无数据</div>
        </div>
        <div class="Retrieval-footer">
            <van-button block color="dodgerblue" @click="sure()">确定</van-button>
            <van-button block color="dodgerblue" @click="close()">返回</van-button>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import { Dialog } from 'vant';
export default {
    name: "Retrieval",
    data() {
        return {
            BaseUrl: window.g.BaseURL,
            loading: false,
            finished: false,
            multipleSelection: [],
            rowData: {},
            tableData: [],
            searchData: {
                taskName: '',
                riskRemove: ''
            },
            Enum: {
                FXDJ: [
                    {
                        name: 'Ⅰ级',
                        value: 0
                    },
                    {
                        name: 'Ⅱ级',
                        value: 1
                    },
                    {
                        name: 'Ⅲ级',
                        value: 2
                    },
                    {
                        name: 'Ⅳ级',
                        value: 3
                    },
                    {
                        name: 'Ⅴ级',
                        value: 4
                    }
                ],
                JDDJ: [
                    {
                        name: 'A级',
                        value: 0
                    },
                    {
                        name: 'B级',
                        value: 1
                    },
                    {
                        name: 'C级',
                        value: 2
                    },
                    {
                        name: 'D级',
                        value: 3
                    }
                ],
                DQZT: [{
                    name: "运行",
                    value: 0
                }, {
                    name: "结束",
                    value: 1
                }],
                QSZT: [{
                    name: "签收",
                    value: 0
                }, {
                    name: "已签收",
                    value: 1
                }, {
                    name: "结束",
                    value: 2
                }]
            },
            pageSize: 15,
            total: 0,
            pageNum: 0,
            cityCode: "",
        }
    },
    props: ['type', 'rowData'],
    filters: {
        inUseName: function (msg, data) {
            let name = ''
            data.forEach(item => {
                if (item.value == msg) {
                    name = item.name
                }
            })
            return name
        },
    },
    components: {},
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.pageNum++;
            if (this.type == '地市') {
                this.getDataSignfor()
            } else {
                this.getData()
            }
        },
        // 点击复选框阻止冒泡
        stopPropagation(e) {
            e.stopPropagation();
        },
        // 复选框选中
        changeVal(val) {
            console.log(val)
            this.multipleSelection = [];
            this.tableData.forEach(item => {
                if (item.checked) {
                    this.multipleSelection.push(item)
                }
            })
        },
        //查询
        getchaXun() {
            this.pageNum = 1;
            this.tableData = []
            this.init()
        },
        // 确定
        sure() {
            if (this.multipleSelection.length == 1) {
                let p = new Promise((resolve, reject) => {
                    axios.post(`${this.BaseUrl}/api/farmerHouse/housePreventTaskSign/relationCheck?relationTaskNo=${this.multipleSelection[0].taskNo}&cityCode=${window.localStorage.getItem("citycode")}`, {}, {
                        headers: {
                            isOutParam: true,
                        },
                    }).then(res => {
                        if (res.data.data) {
                            resolve(true)
                        } else {
                            Dialog.confirm({
                                title: '提示',
                                message: res.data.msg,
                                confirmButtonText: '确定',
                                cancelButtonText: '取消'
                            }).then(() => {
                                resolve(true)
                            }).catch(() => {
                                // on cancel
                            });
                        }
                    })
                })
                p.then(res => {
                    this.$emit("retrievalSure", this.multipleSelection[0])
                })
            } else {
                this.$toast.fail("请选择一条数据进行关联")
            }
        },
        //关闭
        close(){
            this.$emit("close", false)
        },
        // 省级关联数据
        getData: async function () {
            this.loading = true;
            axios.get(`${this.BaseUrl}api/farmerHouse/housePreventTaskInfo/selectTaskRelation?cityCode=${window.localStorage.getItem("citycode")}&taskName=${this.searchData.taskName}&pageNum=${this.pageNum}&pageSize=${this.pageSize}`, {
                headers: {
                    "isOutParam": true,
                    "isOutParamS": true
                }
            }).then(res => {
                this.loading = false;
                if (res.data.code == 200) {
                    res.data.data.pageList.forEach(item => {
                        this.$set(item, 'checked', false)
                        this.tableData.push(item)
                    })
                    this.total = res.data.data.totalCount;
                    // 数据全部加载完成
                    if (this.tableData.length >= this.total) {
                        this.finished = true;
                    }
                } else {
                    this.$toast.fail(res.data.data.msg)
                }
            })
        },
        // 地市关联数据
        getDataSignfor: async function () {
            this.loading = true;
            axios.post(
                        `${this.BaseUrl}api/farmerHouse/housePreventTaskInfo/list/${this.pageNum}/${this.pageSize}`, {
                        cityCode: window.localStorage.getItem("citycode"),
                        taskName: this.searchData.taskName
                    }, {
                        headers: {
                            "isOutParam": true,
                            "isOutParamS": true
                        }
                    }).then(res => {
                        this.loading = false;
                        if (res.data.code == 200) {
                            res.data.data.pageList.forEach(item => {
                                this.$set(item, 'checked', false)
                                this.tableData.push(item)
                            })
                            this.total = res.data.data.totalCount
                            // 数据全部加载完成
                            if (this.tableData.length >= this.total) {
                                this.finished = true;
                            }
                        } else {
                            this.$toast.fail(res.data.data.msg)
                        }
                    })
        },
    },
    beforeDestroy() { }
}
</script>
<style lang="scss" scoped>
.Retrieval {
    height: 100vh;
    position: fixed;
    top: 0;
    overflow: auto;
    background: #eee;
    width: 100vw;
    font-family: 黑体;
    font-size: 18px;
    padding: 6px 10px;

    .title {
        width: 100%;
        height: 46px;
        background: #007aff;
        line-height: 50px;
        text-align: center;
        color: #ffffff;
        font-size: 20px;
    }

    .Retrieval-footer {
        width: 99%;
        margin-top: 4px;
        margin: 0 auto;
        padding-top: 12px;
        display: flex;
        justify-content: space-between;

        .van-button {
            width: 47%;
        }
    }

    .Retrieval-middle1 {
        height: 84vh;
        overflow: auto;

        .Retrieval-middle {
            background-color: #fff;
            width: 98%;
            margin: 0 auto;

            .Retrieval-middle2 {
                font-size: 18px;
                font-weight: 1000;
                color: black;
                line-height: 36px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .Retrieval-middle3 {
                font-size: 14px;
                color: #aaa;
                line-height: 24px;
                clear: both;
                overflow: hidden;

                span {
                    float: right;
                    // padding-left: 4vw;
                }
            }

            .Retrieval-middle4 {
                font-size: 14px;
                color: #aaa;
                line-height: 24px;

                span {
                    float: right;
                    // padding-left: 4vw;
                }
            }
        }
    }
}
</style>
<style>
.Retrieval .van-tab {
    font-size: 18px;
}
.Retrieval .van-field__control {
    text-align: left !important;
}
</style>
